import React, { useEffect, useState } from 'react'
import { Button, Form, Input, message, Select } from 'antd'
import { fetchRequest } from '@/utils/Request';
import { url } from '@/utils/url';
import { useRequest } from '@umijs/hooks';
const { Option } = Select;


const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
};
const tailLayout = {
    wrapperCol: { offset: 5, span: 14 },
};

function Compile(props: any) {
    const { content, isSearch,modification} = props
    const [form] = Form.useForm()
    //  存放校区名称数据数组
    const [collegeAreaList, setCollegeAreaList] = useState<any[]>([]);

    //  校区名称循环下拉框数据
    const collegeAreaOption = collegeAreaList.map((d: any, index: number) => <Option value={d.collegeAreaId} key={index}>{d.collegeAndArea}</Option>);

    //  存放视频设备类型数据数组
    const [videoTypeList, setVideoTypeList] = useState<any>([]);

    //  视频设备类型循环下拉框数据
    const videoTypeOptions = videoTypeList.map((d: any, index: number) => <Option value={d.value} key={index}>{d.title}</Option>);



    //  获取校区名称
    async function getSchoolOrganizationRequest() {
        try {
            const json = await fetchRequest(url.GET_CAMPUS, {collegeAndAreName: ""});
            if (json.success) {
                message.destroy();
                setCollegeAreaList(json.data);
            } else {
                message.destroy();
                message.error(json.error);
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message);
        }
    }

    //  获取视频设备设备类型下拉数据
    async function getDevType(params: any) {
        try {
            const json = await fetchRequest(url.GET_DEVTYPE, params);
            if (json.success) {
                console.log(json.data[0].children)
                setVideoTypeList(json.data[0].children)
            } else {
                message.destroy();
                message.error(json.error)
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message)
        }
    }

    // 发送设备类型请求
    const getTableData = useRequest(getDevType, {
        manual: true,
        loadingDelay: 200
    })

     //新增视频设备的学校的信息
     async function addInfoRequest(params: any) {
        try {
            const json = await fetchRequest(url.GET_ADDVIDOLIST, params);
            if (json.success) {
                form.resetFields();
                modification();
            } else {
                message.destroy();
                form.resetFields();
                message.error(json.error);
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message);
        }
    }

    //新增扫码设备的学校的信息
    async function addSvanTerminal(params: any) {
        try {
            const json = await fetchRequest(url.GET_ADDHEALTH, params);
            if (json.success) {
                form.resetFields();
                modification();
            } else {
                message.destroy();
                form.resetFields();
                message.error(json.error);
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message);
        }
    }

    // 发送扫码设备请求
    const addSvan = useRequest(addSvanTerminal, {
        manual: true,
        loadingDelay: 200
    })

    //  发送视频设备请求
    const addInfo = useRequest(addInfoRequest, {
        manual: true,
        loadingDelay: 200
    })


    //点击搜索按钮修改表格参数
    function onFinish(values: any) {
        const params = {
            ...values,deviceId:content.deviceID
        };
        if (isSearch === 'videoTerminal') {
            if (params.attrIDs) {
                params.attrIDs = []
                params.attrIDs.push(values.attrIDs)
            }
            addInfo.run(params)
        } else {
            addSvan.run(params)
        }

    }

    useEffect(() => {
        getSchoolOrganizationRequest();
        if (isSearch && isSearch === "videoTerminal") {
            getTableData.run({ "devType": 2 })
        } else getTableData.run({ "devType": 3 })
    }, [])

    const loading = isSearch === 'videoTerminal' ? addInfo.loading : addSvan.loading
    // 视频设备
    const videoTerminal = (
        <Form form={form} {...layout} onFinish={onFinish} initialValues={{
            collegeAreaId: content.collegeAreaId, devModelId: parseInt(content.devModelID), hostId: content.hostId,
             latitude: content.latitude, longitude: content.longitude,
            deviceName: content.devName, attrIDs: content.devAttrIDs[0],devMapLocation:content.devMapLocation
        }}>
            <Form.Item name="collegeAreaId" label="校区名称" rules={[{ required: true, message: "必须要选择校区名称!" }]}>
                <Select placeholder="请选择校区名称" disabled>
                    {collegeAreaOption}
                </Select>
            </Form.Item>
            <Form.Item name="devModelId" label="设备类型" rules={[{ required: true, message: "必须要选择设备类型!" }]}>
                <Select placeholder="请选择设备类型" disabled>
                    {videoTypeOptions}
                </Select>
            </Form.Item>

            <Form.Item name="hostId" label="终端序列" rules={[{ required: true, message: "必须要填写终端序列!" }]}>
                <Input placeholder="请填写终端序列" disabled />
            </Form.Item>
            <Form.Item name="deviceName" label="设备名称" rules={[{ required: true, message: "必须要填写设备名称!" }]}>
                <Input placeholder="请填写设备名称" />
            </Form.Item>
            <Form.Item label="进出属性" name="attrIDs">
                <Select allowClear className="search-form-item" placeholder="请选择进出属性" disabled>
                    <Select.Option value={1}>出口</Select.Option>
                    <Select.Option value={2}>入口</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item className="form-control-item" name="devMapLocation" label="详细位置" rules={[{ required: true, message: "必须要填写详细位置!" }]}>
                <Input placeholder="请填写详细位置" />
            </Form.Item>
            <Form.Item className="form-control-item" name="latitude" label="纬度">
                <Input placeholder="请填写纬度" />
            </Form.Item>
            <Form.Item className="form-control-item" name="longitude" label="经度">
                <Input placeholder="请填写经度" />
            </Form.Item>
            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit" loading={loading}>提交</Button>
            </Form.Item>
        </Form>
    )
    const scanTerminal = (
        <Form form={form} {...layout} onFinish={onFinish} initialValues={{
            collegeAreaId: content.collegeAreaId, devModelId: parseInt(content.devModelID), hostId: content.hostId,
            deviceCode: content.deviceCode, address: content.devMapLocation, latitude: content.latitude, longitude: content.longitude
        }}>
            <Form.Item name="collegeAreaId" label="校区名称" rules={[{ required: true, message: "必须要选择校区名称!" }]}>
                <Select placeholder="请选择校区名称" disabled>
                    {collegeAreaOption}
                </Select>
            </Form.Item>

            <Form.Item name="devModelId" label="设备类型" rules={[{ required: true, message: "必须要选择设备类型!" }]}>
                <Select placeholder="请选择设备类型" disabled>
                    {videoTypeOptions}
                </Select>
            </Form.Item>
            <Form.Item name="hostId" label="终端序列号" rules={[{ required: true, message: "必须要填写终端序列号!" }]}>
                <Input placeholder="请填写终端序列号" disabled />
            </Form.Item>
            <Form.Item name="deviceCode" label="设备Mac编号" rules={[{ required: true, message: "必须要填写设备Mac编号!" }]}>
                <Input placeholder="请填写设备Mac编号" disabled />
            </Form.Item>
            <Form.Item name="address" label="详细位置" rules={[{ required: true, message: "必须要填写详细位置!" }]}>
                <Input placeholder="请填写详细位置" />
            </Form.Item>
            <Form.Item className="form-control-item" name="latitude" label="纬度">
                <Input placeholder="请填写纬度" />
            </Form.Item>
            <Form.Item className="form-control-item" name="longitude" label="经度">
                <Input placeholder="请填写经度" />
            </Form.Item>
            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit" loading={loading}>提交</Button>
            </Form.Item>

        </Form>
    )
    return (
        <>{isSearch === 'videoTerminal' ? videoTerminal : scanTerminal}</>
    )
}

export default Compile
